<template>
  <div class="con">
    <div>
      <div class="tou">
        <div class="t1">
          <div class="left">产品分类：</div>
          <div class="right">
            <div
              v-for="(item, index) in list12"
              :key="index"
              :class="{ active: isActive == index }"
              @click="act(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="t1">
          <div class="left">产品类型:</div>
          <div class="right" v-if="list12[isActive]">
            <div
              v-for="(items, index1) in list12[isActive].smallList"
              :key="index1"
              :class="{ active: items.a }"
              @click="act2(isActive, index1)"
            >
              {{ items.name }}
            </div>
          </div>
        </div>
        <!-- v-for="(item, index) in list12"
             :key="index" -->
        <!-- <div class="t1 pal05">
          <div class="left"
               :class="{ active: isActive == index }"
               @click="act(index)">{{ item.name }}：</div> 
          <div class="right">

          </div>
        </div> -->
      </div>
      <div class="sai">
        <div class="right50">
          排序:
        </div>
        <div class="right50 active" @click="qie1(1)">
          价格
          <div class="fle">
            <i class="el-icon-caret-top" :class="{ a: ind1 }"></i>
            <i class="el-icon-caret-bottom" :class="{ a: !ind1 }"></i>
          </div>
        </div>
        <div class="right50 active" @click="qie1(2)">
          发布时间
          <div class="fle">
            <i class="el-icon-caret-top" :class="{ a: ind3 }"></i>
            <i class="el-icon-caret-bottom" :class="{ a: !ind3 }"></i>
          </div>
        </div>
        <div class="div_1" v-if="i_Hidden" @click="active_i">
          <i class="el-icon-bottom"></i>
          <i class="el-icon-bottom"></i>
        </div>

        <div class="div_2" v-else @click="active_i">
          <i class="el-icon-right"></i>
          <i class="el-icon-right"></i>
        </div>

        <div class="fen">
          <div
            class="a"
            :class="{ c: pageNum != 1 }"
            @click="pageNum != 1 ? jian() : ''"
          >
            <i class="el-icon-arrow-left"></i>
          </div>
          <div>
            <span class="c">{{ pageNum }}</span>
            /
            <span>{{ ye }}</span>
          </div>
          <div
            class="a b"
            :class="{ c: pageNum != ye }"
            @click="pageNum != ye ? add() : ''"
          >
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
      <div class="shang" v-if="hidden">
        <div
          class="shangpin"
          v-for="item in list"
          :key="item.id"
          @click="toitem(item.id)"
        >
          <img class="shab" :src="item.imgurl" alt="" />
          <div class="right2">
            <div class="one">{{ item.name }}</div>
            <div class="two">
              类型：{{ item.category == 0 ? "普通商品" : "服务商品" }}
            </div>
            <div class="shw">
              ￥<span>{{ item.price }}</span>
            </div>
            <div class="zhifu">
              <img
                v-if="item.shopTag == 1"
                src="@/assets/img/dianpu/zhiying.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div
          v-if="list.length == 0"
          style="height: 100px;line-height: 100px;text-align: center;"
        >
          无此类型的商品
        </div>
      </div>

      <div class="shangTo" v-else>
        <div
          class="shangpin"
          v-for="item in list"
          :key="item.id"
          @click="toitem(item.id)"
        >
          <img class="shab" :src="item.imgurl" alt="" />
          <div class="right2">
            <div class="one">{{ item.name }}</div>
            <div class="two">
              类型：{{ item.category == 0 ? "普通商品" : "服务商品" }}
            </div>
            <div class="shw">
              ￥<span>{{ item.price }}</span>
            </div>
            <div class="zhifu1">
              <img
                v-if="item.shopTag == 1"
                src="@/assets/img/dianpu/zhiying.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div
          v-if="list.length == 0"
          style="height: 100px;line-height: 100px;text-align: center;"
        >
          无此类型的商品
        </div>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change="handleCurrentChange1"
        prev-text="上一页"
        next-text="下一页"
        ref="pagination"
        class="aut"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      hidden: true,
      i_Hidden: false,
      list12: [],
      isActive: 0,
      // isActive1: true,
      ind1: true, //价格排序
      ind3: true, //时间排序
      pageNum: 1,
      pageSize: 10,
      classId: "",
      list: [],
      total: 0,
      ye: 0 //页数
    };
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.isinput();
    this.getClassList(); //分类
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //计算属性
  computed: {},
  //方法
  methods: {
    active_i() {
      this.hidden = !this.hidden;
      this.i_Hidden = !this.i_Hidden;
    },
    isinput() {
      this.$store.commit("setDValue", true);
    },
    act(i) {
      //切换一级目录
      let list = this.list12;
      list.forEach(o => {
        o.smallList.forEach(c => {
          c.a = false;
        });
      });
      list[i].smallList[0].a = true;
      this.list12 = list;
      this.isActive = i;
      this.classId = list[i].smallList[0].id;
      this.goodsListByClass();
    },
    act2(i, a) {
      let list = this.list12;
      list.forEach(o => {
        o.smallList.forEach(c => {
          c.a = false;
        });
      });
      list[i].smallList[a].a = true;
      this.isActive = i;
      this.list12 = list;
      this.classId = list[i].smallList[a].id;
      this.goodsListByClass();
    },
    qie1(i) {
      this.pageNum = 1;
      if (i == 1) {
        this.ind1 = !this.ind1;
      } else {
        this.ind3 = !this.ind3;
      }
      this.$refs.pagination.internalCurrentPage = this.pageNum;
      this.goodsListByClass();
    },
    jian() {
      this.pageNum--;
      this.$refs.pagination.internalCurrentPage = this.pageNum;
      this.goodsListByClass();
    },
    add() {
      this.pageNum++;
      this.$refs.pagination.internalCurrentPage = this.pageNum;
      this.goodsListByClass();
    },
    handleCurrentChange1(currentPage) {
      console.log(currentPage); //点击第几页
      this.pageNum = currentPage;
      this.goodsListByClass();
    },
    //获取一级二级分类
    async getClassList() {
      let res = await this.$postRequest("/api/goods/getClassList", {
        pageNum: 1,
        pageSize: 1000
      });
      let list12 = res.data.list.map(item => {
        item.smallList.map(c => {
          c.a = false;
          return c;
        });
        return item;
      });
      let a1 = 0,
        b1 = 0;
      list12.forEach((item, index) => {
        item.smallList.forEach((i, j) => {
          if (i.id == this.$route.params.id) {
            a1 = index;
            b1 = j;
          }
        });
      });
      console.log(a1, b1);
      (list12[a1].smallList[b1].a = true),
        (this.classId = list12[a1].smallList[b1].id);
      this.isActive = a1;
      this.list12 = list12;
      this.goodsListByClass();
    },
    //获取商品列表
    async goodsListByClass() {
      let res = await this.$postRequest("/api/goods/goodsListByClass", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        classId: this.classId,
        orderPrice: this.ind1 ? "desc" : "asc",
        orderCaAt: this.ind3 ? "desc" : "asc"
      });
      console.log(res);
      this.total = res.data.total;
      this.ye = Math.ceil(res.data.total / 10);
      this.list = res.data.list;
    },
    toitem(e) {
      let Detail = this.$router.resolve({
        path: "/home/detail",
        query: {
          id: e
        }
      });
      window.open(Detail.href, "_blank");
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  background-color: #f9f9f9;
  & > div {
    width: 1400px;
    margin: auto;

    .tou {
      margin: 20px 0;
      width: 100%;
      background: #ffffff;
      border: 1px solid #eeeeee;
      padding: 0 30px;
      .t1 {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #f9f9f9;
        display: flex;
        align-items: center;
        .left {
          width: 105px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          cursor: pointer;
        }
        .left.active {
          color: #1a69e0;
        }
        .right {
          display: flex;
          align-items: center;
          div {
            margin-left: 25px;
            height: 30px;
            padding: 0 15px;
            line-height: 30px;
            background: rgba(26, 105, 224, 0);
            border: 1px solid transparent;
            box-sizing: content-box;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            cursor: pointer;
          }
          .active {
            color: #1a69e0;
            background: rgba(26, 105, 224, 0.05);
            border: 1px solid #1c55a5;
          }
        }
      }
      .pal05 {
        padding-left: 105px;
      }
    }
    .sai {
      width: 100%;
      height: 60px;
      background: #ffffff;
      border: 1px solid #eeeeee;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      .div_2 {
        display: flex;
        flex-direction: column;
      }
      .fen {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        .a {
          width: 20px;
          height: 20px;
          font-size: 20px;
          cursor: pointer;
          margin-right: 22px;
        }
        .b {
          margin-left: 22px;
        }
        .c {
          color: #000000;
        }
      }
      .right50 {
        margin-right: 50px;
        display: flex;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        &.active {
          color: #1a69e0;
        }
        .fle {
          display: flex;
          flex-flow: column nowrap;
          justify-content: center;
          align-items: center;
          margin-left: 8px;
          .a {
            color: #000000;
          }
        }
      }
    }
    .shang {
      width: 100%;
      background: #ffffff;
      border: 1px solid #eeeeee;
      margin-bottom: 30px;
      .shangpin {
        width: 100%;
        height: 190px;
        background: #ffffff;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        padding: 20px;
        cursor: pointer;
        &:hover {
          box-shadow: 0px 2px 14px 1px rgba(133, 133, 133, 0.15);
        }
        .shab {
          width: 150px;
          height: 150px;
          background: #ffffff;
          border: 1px solid #f9f9f9;
          margin-right: 20px;
        }
        .right2 {
          width: 100%;
          position: relative;
          .one {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            margin-top: 10px;
          }
          .two {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #747474;
            margin: 18px 0;
          }
          .shw {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #e0441a;
            margin-bottom: 18px;
            span {
              font-size: 24px;
            }
          }
          .zhifu {
            img {
              width: 35px;
              height: 18px;
              margin-top: 7px;
            }
          }
          .si {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }
        }
      }
      .aut {
        text-align: center;
        margin-top: 14px;
        margin-bottom: 14px;
      }
    }

    .shangTo {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      box-sizing: border-box;
      .shangpin {
        width: 200px;
        height: 240px;
        background-color: #fff;
        cursor: pointer;
        margin-bottom: 20px;
        margin-right: 40px;
        &:hover {
          box-shadow: 0px 2px 14px 1px rgba(133, 133, 133, 0.15);
        }
        .shab {
          width: 180px;
          height: 140px;
          background: #ffffff;
          border: 1px solid #f9f9f9;
          margin-left: 10px;
          margin-top: 8px;
        }
        .right2 {
          position: relative;
          width: 100%;
          padding: 0 15px;
          .one {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            margin-top: 3px;

            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
          }
          .two {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #747474;
            margin: 5px 0;
          }
          .shw {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #e0441a;
            span {
              font-size: 24px;
            }
          }
          .zhifu1 {
            position: absolute;
            right: 0;
            bottom: 0;
            img {
              width: 30px;
              height: 16px;
              margin-top: 7px;
            }
          }
          .si {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }
        }
      }
      .shangpin:nth-child(6n + 6) {
        margin-right: 0;
      }
    }
    /deep/ .el-pagination {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      button,
      .el-pagination span:not([class*="suffix"]) {
        width: 60px;
      }
    }
  }
}
</style>